<template>
    <div>

        <Card>
            <div class="muti-btn">
                <Button type="primary" @click="openUpdateMenu()">创建菜单</Button>
            </div>
            <tree-table
                    style="overflow: visible"
                    ref="table"
                    v-model="menu.data"
                    :data="menu.data"
                    :columns="menu.columns"
                    :selectable="false"
                    :expand-type="false"
                    :isFold="false"
            >
                <template slot="handleMenu" slot-scope="scope">
                    <Button size="small" type="info" style="margin-left:8px" @click="openUpdateMenu(scope.row)">更新
                    </Button>
                    <Poptip confirm
                            title="您确认删除这条内容吗？"
                            @on-ok="deleteMenu(scope)"
                    >
                        <Button size="small" type="error" style="margin-left: 8px">删除</Button>
                    </Poptip>
                </template>
                <template slot="icon" slot-scope="scope">
                    <Icon v-if="scope.row.menuType === '目录'" type="md-folder"></Icon>
                    <Icon v-if="scope.row.menuType === '导航菜单'" type="ios-document"></Icon>
                    <Icon v-if="scope.row.menuType === '功能按钮'" type="ios-radio-button-on"></Icon>
                    <span style="margin-left: 8px">{{scope.row.menuType}}</span>
                </template>
                <template slot="perm" slot-scope="scope">
                    <Badge v-if="scope.row.perm !== '无权限'" :text="scope.row.perm" status="success"/>
                    <Badge v-if="scope.row.perm==='无权限'" :text="scope.row.perm" status="warning"/>
                </template>
            </tree-table>
            <Modal
                    v-model="update.isOpen"
                    title="菜单操作"
                    @on-ok="updateMenu('menus')"
            >
                <edit ref="menus" v-model="update.data" :menuList="this.menu.data"></edit>
            </Modal>

        </Card>
    </div>
</template>

<script>
    import {createUpdateMenu, delMenu, getMenus} from '@/api'
    import edit from "_c/menu/edit"

    export default {
        name: 'menus',
        components: {
            edit
        },
        data() {
            return {
                update: {
                    isOpen: false,
                    data: {}
                },
                menu: {
                    selectable: false,
                    data: [],
                    columns: [
                        {
                            title: 'id',
                            key: 'menuId',
                        },
                        {
                            title: '菜单名称',
                            key: 'menuName',
                        },
                        {
                            title: '菜单URL',
                            key: 'url',
                        },
                        {
                            title: '菜单组件',
                            key: 'component',
                        },
                        {
                            title: '菜单类型',
                            key: 'menuType',
                            type: 'template',
                            template: 'icon'
                        },
                        {
                            title: '对应权限',
                            key: 'perm',
                            type: 'template',
                            template: 'perm'
                        },
                        {
                            title: '操作',
                            key: 'handleMenu',
                            minWidth: '200px',
                            type: 'template',
                            template: 'handleMenu'
                        }
                    ]
                },


            }
        },
        methods: {
            deleteMenu(scope) {
                const row = scope.row
                if (row.children && row.children.length !== 0) {
                    this.$Message.error("请先删除子菜单!")
                    return
                }
                const id = row.menuId
                delMenu(id).then(() => {
                    this.$Message.success("删除成功")
                    const fifter = (list) => {
                        if (!list) return null;
                        list.forEach((item, index, arr) => {
                            if (item.children) {
                                fifter(item.children)
                            }
                            if (item.menuId === id) {
                                arr.splice(index, 1);
                            }
                        })
                        return list;
                    }
                    this.menu.data = fifter(this.menu.data)
                })
            },

            getMenus() {
                const getMenuTypeValue = (menuType) => {
                    if (!menuType) {
                        return -1;
                    } else if (menuType === '目录') {
                        return 0;
                    } else if (menuType === '导航菜单') {
                        return 1;
                    } else if (menuType === '功能按钮') {
                        return 2;
                    }
                    return -1;
                }
                const result = (list) => {
                    if (!list) return null;
                    list.forEach(item => {
                        const perm = item.perm
                        item.perm = perm || "无权限"
                        item.menuTypeValue = getMenuTypeValue(item.menuType)
                        if (item.children) {
                            result(item.children)
                        }
                    })
                    return list;
                }
                getMenus().then(res => {
                    this.menu.data = result(res.data.menus)
                })
            },
            openUpdateMenu(row = {}) {
                this.update.isOpen = !this.update.isOpen
                this.update.data = row
            },
            updateMenu(menus) {
                this.$refs[menus].validate().then(() => {
                    createUpdateMenu(this.update.data).then((res) => {
                        if (res && res.meta && res.meta.isSuccess) {
                            this.$Message.success("修改成功")
                            this.getMenus()
                        } else {
                            this.$Message.error({content: "修改失败:" + res.meta.msg || "未知错误", duration: 5})
                        }
                    })
                }).catch(() => {
                    this.$Message.error("数据输入错误!")
                })

            }
        },
        mounted() {
            this.getMenus()
        }
    }
</script>

<style lang="scss">
    .muti-btn {
        margin-bottom: 10px;
        display: flex;
    }

</style>
